<template>
	<view>
		<uni-transition :mode-class="['slide-bottom']" :show="!!cartNum" :styles="cartBarStyles">
			<view class="left">
				<view class="detail-action" @tap="details">
					<image src="/static/images/index/icon_shopping_bag.png" class="shopbag-btn"></image>
					<view class="badge">{{ cartNum }}</view>
				</view>
				<view class="price">
					<text class="fsize-24">￥</text>
					<text>{{ cartPrice }}</text>
				</view>
			</view>
			<view type="primary" class="right" @tap="pay">立即购买</view>
		</uni-transition>
		<view class="">
		</view>
		<cart-popup :cart="cart" ref="cartPopup" @add="add" @minus="minus" @clear="clear"></cart-popup>
	</view>
</template>

<script>
import uniTransition from '@/components/uni-transition/uni-transition.vue'
import cartPopup from '../cart-popup/cart-popup.vue'

export default {
	name: 'CartBar',
	components: {
		uniTransition,
		cartPopup
	},
	props: {
		cart: {
			type: Array,
			default: () => []
		}
	},
	computed: {
		cartNum() { //计算购物车总数
			return this.cart.reduce((acc, cur) => acc + cur.number, 0)
		},
		cartPrice() {	//计算购物车总价
			const price = this.cart.reduce((acc, cur) => acc + cur.number * cur.FPosPrice, 0)
			return price.toFixed(2)
		}	
	},
	data() {
		return {
			cartBarStyles: {
				'position': 'fixed',
				'bottom': '10rpx',
				'left':'20rpx',
				// #ifdef H5
				'bottom': 'var(--window-bottom)',
				// #endif
				'width': '710rpx',
				'z-index': '995',
				'height': '92rpx',
				'background': 'rgba(255,255,255,0.96)',
				'display': 'flex',
				'justify-content': 'space-between',
				'align-items': 'center',
				'border':'1px solid #f0f0f0',
				'border-radius':'46rpx'
			}
		}
	},
	methods: {
		details() {
			this.$refs['cartPopup'].open()
			console.log('open')
		},
		add(product) {
			this.$emit('add', {...product, number: 1})
		},
		minus(product) {
			this.$emit('minus', product)
		},
		clear() {
			this.$emit('clear')
		},
		pay() {
			this.$emit('pay')
		}
	},
	watch: {
		cartNum(val) {
			if(!val) {
				this.$refs['cartPopup'].close()
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.left {
	display: flex;
	align-items: center;

	.detail-action {
		box-shadow: 0 10rpx 10rpx 0 rgba($color: #c8c7cc, $alpha: 0.2);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 100rpx;
		margin-right: 60rpx;
		margin-left: 20rpx;

		.shopbag-btn {
			display: block;
			width: 138rpx;
			height: 110rpx;
			position: absolute;
			left: 0;
			bottom: 20rpx;
		}

		.badge {
			width: 36rpx;
			height: 36rpx;
			font-size: 20rpx;
			color:#111111;
			line-height: 36rpx;
			background: linear-gradient(34deg, #F3C45D, #EDAC2F);
			border: 1px solid #F5F5F5;
			border-radius: 50%;
			text-align: center;
			position: absolute;
			right: -38rpx;
			top: -20rpx;
		}
	}

	.price {
		font-size: 36rpx;
		font-weight: bold;
		color: #111111;
	}
}

.right {
	width: 200rpx;
	height: 84rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #111111;
	line-height: 84rpx;
	text-align: center;
	background: linear-gradient(34deg, #F3C45D, #EDAC2F);
	border-radius: 42rpx;
}
</style>
